<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Z-轴指数属性(z-index attribute)</title>
  <!-- 
    CSS中的z-index属性用于控制元素在堆叠顺序（层叠顺序）中的显示优先级。
    z-index属性相关的常见特点和用法： 
      
      1. z-index属性值是一个整数，值越大的元素会显示在值较小的元素之上。 
      2. 默认情况下，元素的z-index值为auto，即遵循它们在文档流中的顺序进行堆叠。 
      3. 可以通过设置z-index属性为正整数或负整数来控制元素的层叠顺序。 
      4. z-index只在元素的position属性值为relative、absolute或fixed时生效，对于static定位的元素不起作用。 
      5. 当多个元素重叠时，通过设置不同的z-index值可以控制它们的显示顺序。 
   -->
   <style>
     div {
       position: fixed;
       width: 150px;
       height: 150px;
     }

     .z-index-v1 {
       left: 0;
       top: 0;
       background-color: rgba(205, 0, 0);
       color: white;
     }

     .z-index-v2 {
       left: 50px;
       top: 50px;
       background-color: rgba(0, 205, 0);
       color: white;
       z-index: -1;
     }

     .z-index-v3 {
       left: 100px;
       top: 100px;
       background-color: rgba(0, 0, 205);
       color: white;
     }
   </style>
</head>
<body>

  <div class="z-index-v1">z-index-v1</div>
  <div class="z-index-v2">z-index-v2</div>
  <div class="z-index-v3">z-index-v3</div>
  
</body>
</html>